<template>
  <div class="an-box an-page">
    <el-form :inline="true" :model="getData" class="an-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="getData.name" placeholder="关键字搜索"></el-input>
      </el-form-item>
      <el-form-item label="是否上架">
        <el-select v-model="getData.state" placeholder>
          <el-option label="全部" value></el-option>
          <el-option label="上架" value="1"></el-option>
          <el-option label="下架" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-cascader
          v-model="getData.typeId"
          :options="goodsType"
          :props="propsTree"
          :show-all-levels="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList(1)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="table"
      v-loading="loading"
      :data="list"
      style="width: 100%;"
      :max-height="tabHeight"
      tooltip-effect="dark"
    >
      <el-table-column label="缩略图" width="100">
        <template #default="scope">
          <el-image style="width: 60px; height: 60px" :src="scope.row.image" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" show-overflow-tooltip>
        <template #default="scope">
          <el-button type="text" @click="clickInfo(scope.row)">{{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="sellCount" label="累计销量"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
      <el-table-column prop="typeId" label="分类">
        <template #default="scope">
          <span>{{AUTH.getTypeName(scope.row.typeId, goodsTypeList)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.state==1?'success':'info'">{{scope.row.state==1?"上架":"下架"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
          <el-button
            type="text"
            size="small"
            @click="stateClick(scope.row)"
          >{{scope.row.state==1?"下架":"上架"}}</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="an-page-class">
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="getList"></el-pagination>
    </div>

    <goods-info v-if="isVisible" v-model:isVisible="isVisible" :id="goodsID"></goods-info>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Goods, GoodsType } from "@/utils/interface";
import goodsInfo from "@/components/GoodsInfo/index.vue";
interface GoodsTree extends GoodsType {
  children: Array<GoodsType>;
}
@Options({
  components: {
    goodsInfo,
  },
})
export default class goodsList extends Vue {
  [x: string]: any;
  goodsType: Array<GoodsTree> = []; // 商品分类数据 树形结构
  data() {
    const list: Goods[] = [];
    return {
      loading: false,
      list,
      total: 0,
      getData: {
        page: 1,
        pageSize: 10,
        name: "",
        state: "",
        typeId: "",
      },
      tabHeight: 200,
      goodsID: null,
      isVisible: false,
      goodsTypeList: [], // 商品分类
      propsTree: {
        value: "id",
        label: "typeName",
      },
    };
  }
  created() {
    this.init();
    this.getTypeList();
  }
  mounted(): void {
    this.getList(1);
  }
  // 初始化
  init() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.tabHeight = h - 250 > 200 ? h - 250 : 200; // 减去页面上固定高度height
  }

  // 获取分类数据
  getTypeList() {
    this.$store
      .dispatch("appModule/getGoodsType")
      .then((res: Array<GoodsType>) => {
        this.goodsTypeList = res;
        let arry = JSON.parse(JSON.stringify(res));
        this.goodsType = this.AUTH.createTree([...arry], "id", "parentID");
      });
  }

  // 查询数据
  getList(page: Number) {
    if (page) {
      this.getData.page = page;
    }
    this.loading = true;
    let nd = Object.assign({}, this.getData);
    nd.typeId = this.getData.typeId[this.getData.typeId.length - 1];
    this.API.goodsList(nd).then((res: any) => {
      this.loading = false;
      this.total = res.total;
      this.list = res.records;
    });
  }
  // 查看
  clickInfo(item: Goods) {
    this.goodsID = item.id;
    this.isVisible = true;
  }

  // 编辑
  editClick(item: Goods) {
    this.$router.push({ path: "/goodsAdd", query: { id: item.id.toString() } });
  }

  // 下架或上架
  stateClick(item: Goods) {
    let nd = {
      id: item.id,
      state: item.state == 1 ? "0" : "1",
    };
    this.API.goodsUpdate(nd).then(() => {
      this.$message.success("修改成功");
      this.getList(this.getData.page);
    });
  }

  // 删除
  deleteClick(item: Goods) {
    this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.API.goodsDelete(item.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList(this.getData.page);
        });
      })
      .catch(() => {});
  }
}
</script>